<template>
	<view class="invoic-apply">
		
		<view class="acea-row row-between-wrapper nav">
			<view class="fs30 fc333"><text class="start-red mr10">*</text>报名入口</view>
<!-- 			<uni-data-select
				v-model="players"
				:localdata="range"
				@change="change"
				placeholder="下拉选择人数"
			></uni-data-select> -->
				<typeselect
					v-model='baoming_id'
					:list='list'
					valueName='title' 
					keyName="baoming_id"
					price="pay_price"
					@change='change'
				></typeselect>
		</view>
		
		<view class="nav">
			<view class="acea-row row-between-wrapper">
				<view class="acea-row">
					<text class="start-red">*</text>
					<text class="fs30 fc333">抬头类型</text>
				</view>
				<view class="acea-row row-middle right">
					<view class="geren" :class="type==2?'on':''" @click="toggle(2)">企业</view>
					<view class="geren ml30" :class="type==1?'on':''" @click="toggle(1)">个人</view>
				</view>
			</view>
			<view class="acea-row row-between-wrapper mt30">
				<view class="acea-row">
					<text class="start-red ">*</text>
					<text class="fs30 fc333">发票类型</text>
				</view>
				<view class="acea-row row-middle right">
					<view class="geren on" style="width:330rpx;">增值税普通发票</view>
				</view>
			</view>
			<block v-if="type==2">
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="start-red ">*</text>
						<text class="fs30 fc333">发票抬头</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="name" type="text" placeholder="请输入你的单位全称" placeholder-class="fc9e fs26"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="start-red ">*</text>
						<text class="fs30 fc333">税务登记证号</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="duty_number" type="text" placeholder="请填写税务登记证号" placeholder-class="fc9e fs26"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="fs30 fc333">开户银行名称</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="bank" type="text" placeholder="请输入开户许可证上的开户银行" placeholder-class="fc9e fs26"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="fs30 fc333">基本开户账号</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="card_number" type="text" placeholder="请输入开户许可证上的银行账号" placeholder-class="fc9e fs26"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="fs30 fc333">企业注册地址</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="address" type="text" placeholder="请输入营业执照上的注册地址" placeholder-class="fc9e fs26"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="fs30 fc333">企业注册电话</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="tell" type="text" placeholder="请输入企业有效的联系电话" placeholder-class="fc9e fs26"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="fs30 fc333">企业邮箱账号</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="email" type="text" placeholder="请输入企业有效的邮箱账号" placeholder-class="fc9e fs26"/>
					</view>
				</view>
			</block>
			<block v-if="type==1">
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="start-red ">*</text>
						<text class="fs30 fc333">发票抬头</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="name" type="text" placeholder="需要开具发票的姓名" placeholder-class="fc9e fs26"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="start-red ">*</text>
						<text class="fs30 fc333">手机号</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="drawer_phone" type="text" placeholder="请填写手机号码" placeholder-class="fc9e fs26"/>
					</view>
				</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="acea-row">
						<text class="fs30 fc333">邮箱编号</text>
					</view>
					<view class="acea-row row-middle right">
						<input class="input" v-model="email" type="text" placeholder="您的联系邮箱" placeholder-class="fc9e fs26"/>
					</view>
				</view>
			</block>
		</view>
		
		<view class="apply-btn" @click.stop="open">
			点击申请发票
		</view>
		
		<uni-popup type="center" ref="center">
			<view class="frame acea-row row-column row-middle row-around">
				<view class="fs36 fc333 bold">温馨提示</view>
				<view class="fs40 fc333 bold mt30">您确定提交申请开票吗?</view>
				<view class="acea-row row-between-wrapper mt30">
					<view class="btn bgccc fc9e" @click="close">取消</view>
					<view class="btn fcwhite bgtheme" @click="confrim">确定</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import{
		invoicableConfirm,
		invoicableList,
		
	} from '@/api/other.js'
	import typeselect from '@/components/typeselect.vue'
	export default {
		components:{
			typeselect
		},
		data() {
			return {
				type:1,
				baoming_id:'',
				header_type:'',
				name:'',
				duty_number:'',
				drawer_phone:'',
				email:'',
				tell:'',
				address:'',
				bank:'',
				card_number:'',
				
				list:[],
				
				
			};
		},
		onLoad() {
			this.getlist();
		},
		methods:{
			confrim(){
				let that = this;
				let data = {
					baoming_id: that.baoming_id,
					header_type: that.header_type,
					name: that.name,
					duty_number: that.duty_number,
					drawer_phone: that.drawer_phone,
					email: that.email,
					tell: that.tell,
					address: that.address,
					bank: that.bank,
					card_number: that.card_number
				}
				invoicableConfirm(data).then(res=>{
					that.$util.Tips({  title: res.msg },()=>{
						uni.navigateBack()
					});
				}).catch(err=>{
					that.$util.Tips({  title: err });
				})
			},
			open(){ 	
				let that = this;
				if( that.type == 2 ){
					if( !that.baoming_id ) return that.$util.Tips({  title: '请选择报名入口' });
					if( !that.name ) return that.$util.Tips({  title: '请输入你的单位全称' });
					if( !that.duty_number ) return that.$util.Tips({  title: '请填写税务登记证号' });
					that.$refs.center.open();
				}
				if( that.type == 1 ){
					if( !that.baoming_id ) return that.$util.Tips({  title: '请选择报名入口' });
					if( !that.name ) return that.$util.Tips({  title: '请填写姓名' });
					if( !that.drawer_phone ) return that.$util.Tips({  title: '请填写手机号' });
					that.$refs.center.open();
				}
			},
			close(){
				this.$refs.center.close();
			},
			getlist(){
				invoicableList().then(res=>{
					this.list = res.data.data;
				})
			},
			toggle(e){
				this.type = e;
				this.header_type = e;
			},
			change(e){

			},
		}
	}
</script>

<style lang="scss">
	.invoic-apply{
		
		.nav{
			width: 100%;
			padding: 30rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			margin-top: 30rpx;
			
			.start-red{
				color: #FF301A;
			}
			
			.geren{
				width: 180rpx;
				height: 56rpx;
				border-radius: 28rpx;
				background: #E5E5E5;
				color: #898989;
				font-size: 28rpx;
				text-align: center;
				line-height: 56rpx;
				
				&.on{
					border: 1rpx solid #FF301A;
					color: #FF301A;
					background: #FDECEC;
				}
			}
			
			.right{
				width: 460rpx;
			}
			
			.input{
				width: 440rpx;
				height: 60rpx;
				text-align: center;
				line-height: 60rpx;
				border: 1rpx solid #B3B3B3;
				border-radius: 10rpx;
			}
			
			
		}
		
		.apply-btn{
			width: 690rpx;
			height: 96rpx;
			border-radius: 48rpx;
			background: rgba(98, 82, 223, 0.2);
			margin: 50rpx auto;
			text-align: center;
			line-height: 96rpx;
			font-size: 30rpx;
			color: #6252DF;
		}
		
		.frame{
			width: 660rpx;
			height: 380rpx;
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 30rpx;
			
			.btn{
				width: 240rpx;
				height: 70rpx;
				border-radius: 35rpx;
				text-align: center;
				line-height: 70rpx;
				margin: 0 20rpx;
				font-size: 28rpx;
			}
		}
		
		
	}
</style>
